<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>浮动-左中右布局</title>
	<style>
		.box {
			width: 1200px;
		}

		p {
			padding: 0px;
			margin: 0px;
		}

		.p-left {
			/* 左浮动 */
			float: left;
		}

		.p-right {
			/* 右浮动 */
			float: right;
		}

		.p-center {
			width: 400px;
			margin: 0px auto;
			text-align: center;
			background-color: #ff0000;
		}
	</style>
</head>

<body>
	<div class="box">
		<p class="p-left">我在左边</p>
		<p class="p-right">我在右边</p>
		<p class="p-center">我在中间</p>
	</div>
</body>

</html>